<template>
	<div id="navbar-components">
		<!-- <nuxt-link to="/echartsTest">
			<n-button type="primary">echarts饼状图</n-button>
		</nuxt-link>
		<nuxt-link to="/chinaMapTest">
			<n-button type="primary">echarts中国地图</n-button>
		</nuxt-link>
		<nuxt-link to="/bigNumberTest">
			<n-button type="primary">bigNumber使用</n-button>
		</nuxt-link>
		<nuxt-link to="/elementPlusTest">
			<n-button type="primary">elementPlus使用</n-button>
		</nuxt-link>
		<nuxt-link to="/scrollReveal">
			<n-button type="primary">scrollReveal使用</n-button>
		</nuxt-link>
		<n-button type="primary" @click="changeLayout">切换layout</n-button>
		<n-button type="primary" @click="changeRouter">富文本</n-button> -->
		<div class="nav-center">
			<div class="nav-list">
				<div class="nav-li" v-for="(item) in navList" @click="changeRouter(item)">{{item.title}}</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	// import { getBannerList } from '@/api/api.ts';
	import {
		NButton
	} from 'naive-ui'
	// 路由获取传参对象
	const route = useRoute()
	// 路由
	const router = useRouter()
	// 默认加default的layout
	definePageMeta({
	  layout: "default",
	})
	// 指定图表的配置项和数据
	const navList = ref([
		{
			title: '首页',
			path: '/'
		},
		{
			title: 'echarts饼状图',
			path: '/echartsTest'
		},
		{
			title: 'echarts中国地图',
			path: '/chinaMapTest'
		},
		{
			title: 'bigNumber使用',
			path: '/bigNumberTest'
		},
		{
			title: 'elementPlus使用',
			path: '/elementPlusTest'
		},
		{
			title: 'scrollReveal使用',
			path: '/scrollReveal'
		},
		{
			title: '切换layout',
			path: '/scrollReveal'
		},
		{
			title: '富文本',
			path: '/wangEditer'
		}
	]) 
	// 测试请求接口
	const getBannerListFn = () => {
		// getBannerList().then((res: any) => {
		// 	console.log(res)
		// })
	}
	// 切换layout的自定义页面
	// const changeLayout = () => {
		// This will work in both `<script setup>` and `<script>`
		// setPageLayout('custom')
	// }
	const changeRouter = (item: any) => {
		if(item.path === 'custom'){
			setPageLayout('custom')
			return
		}
		router.push({
			path: item.path
		})
	}
	onMounted(() => {
		// state的使用，获取
		const userData = useInfo();
		const token = useToken();
		console.log(userData.value);
		console.log(token.value);
		
		/**
		 * useCookie使用
		 */
		// 获取 Cookie
		const Cookies = useCookie('token')
		console.log(Cookies)
		// 设置 Cookie
		// Cookies.value = Cookies.value || ''
		// 删除  Cookie
		// Cookies.value = undefined || null
	})
	getBannerListFn()
</script>

<style scoped lang="scss">
	#navbar-components{
		width:100%;
		position: sticky;
		top: 0;
		z-index: 9999;
		left: 0;
		background: #ffffff;
		.nav-center{
			box-shadow: 0 0 10px #cccccc;
			width:100%;
			height: 90px;
			min-width: 1200px;
			.nav-list{
				width: 80%;
				background: #ffffff;
				margin: 0 auto;
				display: flex;
				align-items: center;
				height: 100%;
				// background: yellow;
				.nav-li{
					margin-right: 40px;
					cursor: pointer;
				}
			}
		}
	}
</style>
